@import "ui-variables";

atom-panel.modal,
.overlay {
  color: @text-color;
  padding: @component-padding;
  border-radius: @component-border-radius;

  .editor.mini {
    margin-bottom: @component-padding;
  }

  // Search results
  .select-list ol.list-group,
  &.select-list ol.list-group {
    background-color: @input-background-color;
    padding-top: 0; // prevents it from jumping sometimes
    box-shadow: inset 0 0 0 1px @base-border-color;

    li {
      padding: @component-padding;
      border-bottom: 1px solid @base-border-color;

      &.two-lines {
        line-height: 1.5;

        // File name
        .primary-line {
          font-size: @font-size-h4;
        }

        &.selected {
          .secondary-line {
            color: lighten(@background-color-selected, 25%);
          }
        }
      }
      &.selected {
        color: @text-color-selected;
        background-color: @background-color-selected;
        border-bottom-color: @background-color-selected;
        box-shadow: 0 -1px 0 0 @background-color-selected;
        margin-left: 0; // nullify the margin of `li`
        margin-right: 0;
        padding-left: @component-padding + 1;
        padding-right: @component-padding + 1;
      }

      .status.icon {
        float: right;
        margin-left: @component-icon-padding;

        &:before {
          margin-right: 0;
        }
      }
    }
  }
}

// Frame for the autocomplete suggestions
.select-list.popover-list {
  border-radius: @component-border-radius; // make the box shadow follow the rounded edges of the children
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.22),
    0 14px 56px rgba(0, 0, 0, 0.25);
  background: transparent;
}

.select-list.corrections {
  background-color: @base-background-color;
  border-radius: @component-border-radius;
}

// The window itself
atom-panel.modal {
  top: 15% !important;
  border-top-right-radius: @component-border-radius !important;
  border-top-left-radius: @component-border-radius !important;
  box-shadow:
    0 15px 24px rgba(0, 0, 0, 0.22),
    0 19px 76px rgba(0, 0, 0, 0.3);

  .select-list .error-message {
    font-size: @font-size-h3;
    font-family: @font-family-headlines;
    text-align: center;
    color: @text-color-subtle;
  }

  .list-group .character-match {
    background-color: rgba(0, 0, 0, 0.1);
    color: inherit;
    font-weight: normal;
  }

  .list-group .selected .character-match {
    background-color: rgba(0, 0, 0, 0.2);
  }
}

.key-binding {
  display: inline-block;
  margin-left: @component-padding / 2;
  font-family: @font-family; // otherwise `monospace`
  background-color: @button-background-color;
  border-radius: @component-border-radius;
  box-shadow:
    0 0 0 1px @base-border-color-transparent,
    inset 0 -1px 0 0 @base-border-color;
}

autocomplete-suggestion-list .suggestion-list-scroller {
  border-radius: @component-border-radius;
}

autocomplete-suggestion-list .suggestion-description {
  margin-top: -@component-padding / 2;
  border-top: none;
  min-height: auto;
}

autocomplete-suggestion-list.select-list.popover-list .suggestion-description {
  padding: @component-padding @component-padding (@component-padding / 2);
}

// Don't display when no results
ol.list-group:empty {
  display: none;
}
